<%--
  Created by IntelliJ IDEA.
  User: 李文超
  Date: 2024/7/1
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Buyer</title>
    <style>
        a{
            text-decoration: none;
        }
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;

        }
        body{
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }

        .mainDivleft {
            width: 200px;
            height: 800px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 10%;
            top: 47%;
            transform: translate(-50%, -50%);
        }
        .classifyText{
            font-size: 30px;
        }
        .mainDivright {
            border-style: solid;
            border-width: 3px;
            border-color: purple;
            width: 1300px;
            height: 800px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 55%;
            top: -38%;
            transform: translate(-50%, -50%);
        }
        .linkStyle{
            font-size: 20px;
        }
        .mainTop {
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
        }
        .classifyright{
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            margin-left:950px;
            margin-top: -30%;
        }

        .book {
            width: 1300px;
            height: 400px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 55%;
            top: -90%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-wrap: wrap; /* 如果需要换行，可以启用这个属性 */
            justify-content: space-between; /* 根据需要调整元素之间的空间 */
        }
        .bottom {
            width: 1300px;
            height: 50px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 55%;
            top: -120%;
            transform: translate(-50%, -50%);
        }
        #inputs{
            width: 250px;
            margin-left: 800px;
            height: 35px;
        }
        #i{
            height: 35px;
            width: 50px;
        }
        .gb{
            margin-top: 200px;
            font-size: 50px;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="mainTop">
            <form action="findbooksbyuser" method="get" class="sea">
                <input type="text" name="query" placeholder="请输入关键词" id="inputs">
                <input type="submit" value="搜索" id="i">
            </form>
    </div>
        <div class="mainDivleft">
            <div class="mainContent">
                <div class="classify">
                    <p class="headClassifyText" style="font-size: 35px" >图书分类</p>
                    <div class="literature">
                        <p class="classifyText">文学</p>
                        <a href="#" class="linkStyle">小说</a>
                        <br>
                        <a href="#" class="linkStyle">科幻</a>
                        <br>
                        <a href="#" class="linkStyle">散文</a>
                        <br>
                        <a href="#" class="linkStyle">悬疑</a>
                    </div>
                    <div class="child">
                        <p class="classifyText">童书</p>
                        <a href="#" class="linkStyle">绘本</a>
                        <br>
                        <a href="#" class="linkStyle">少儿英语</a>
                        <br>
                        <a href="#" class="linkStyle">幼儿启蒙</a>
                        <br>
                        <a href="#" class="linkStyle">动漫卡通</a>
                    </div>

                    <div class="encouagement">
                        <p class="classifyText">励志</p>
                        <a href="#" class="linkStyle">心灵鸡汤</a>
                        <br>
                        <a href="#" class="linkStyle">社交</a>
                        <br>
                        <a href="#" class="linkStyle">女性励志</a>
                        <br>
                        <a href="#" class="linkStyle">口才</a>
                    </div>

                    <div class="art">
                        <p class="classifyText">艺术</p>
                        <a href="#" class="linkStyle">绘画</a>
                        <br>
                        <a href="#" class="linkStyle">书法</a>
                        <br>
                        <a href="#" class="linkStyle">摄影</a>
                        <br>
                        <a href="#" class="linkStyle">音乐</a>
                    </div>

                    <div class="life">
                        <p class="classifyText">生活</p>
                        <a href="#" class="linkStyle">美食</a>
                        <br>
                        <a href="#" class="linkStyle">美妆</a>
                        <br>
                        <a href="#" class="linkStyle">体育</a>
                        <br>
                        <a href="#" class="linkStyle">家居</a>
                    </div>
                </div>
    </div>
</div>
        <div class="mainDivright">
            <div class="mainRight">
                <img src="./img/buyer2.png" width="900px" height="400px" style="margin-top: 40px">

                <div class="classifyright">
                    <p class="headClassifyText" style="font-size: 35px" >今日头条</p>
                    <div class="literature">
                        <table>
                            <tr class="linkStyle">叶贵阳是ygy</tr>
                            <br>
                            <tr class="linkStyle">吴佳俊是wjj</tr>
                            <br>
                            <tr class="linkStyle">冯楷晟是fks</tr>
                            <br>
                            <tr class="linkStyle">苏煜诚是syc</tr>
                        </table>
                        <div class="gb"> 好书推荐: </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="book">
            <div class="book1">
                <img src="./img/buyer3.png" height="200px" width="200px">
                <br>
                <p>book1</p>
            </div>
            <div class="book2">
                <img src="./img/buyer4.png" height="200px" width="200px">
                <br>
                <p>book2</p>
            </div>
            <div class="book3">
                <img src="./img/buyer5.png" height="200px" width="200px">
                <br>
                <p>book3</p>
            </div>
            <div class="book4">
                <img src="./img/buyer6.png" height="200px" width="200px">
                <br>
                <p>book4</p>
            </div>
            <div class="book5">
                <img src="./img/buyer1.png" height="200px" width="200px">
                <br>
                <p>book5</p>
            </div>
        </div>
        <div class="bottom">
            <div class="msg">
                <a href="/findcart" style="font-size: 30px;margin-left: 100px" >购物车</a>
                <a href="/getbuyerorder" style="font-size: 30px;margin-left: 500px">订单查询</a>
            </div>
        </div>
    </div>
</body>
</html>
